<script lang="ts" setup>
import { fetchGetSocietyList } from '@/api/society/index'
import { onMounted, reactive } from 'vue'
const imgList = [
  {
    url: 'https://imgpp.ztupic.com/bup/so/20210511/51e9abce9b7738115f4242b06ec37678-1.jpg?x-oss-process=image/resize,w_1024/quality,q_85/watermark,image_d2F0ZXIucG5n,type_ZmFuZ3poZW5naGVpdGk',
  },
  {
    url: 'https://img2.baidu.com/it/u=308294513,3911180338&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
  },
  {
    url: 'https://img2.baidu.com/it/u=1716223114,44480580&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750',
  },
  {
    url: 'https://img2.baidu.com/it/u=3375046847,949781776&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500',
  },
  {
    url: 'https://img2.baidu.com/it/u=3956598324,1675492357&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=439',
  },
  {
    url: 'https://img2.baidu.com/it/u=1074319289,1860864563&fm=253&fmt=auto&app=138&f=JPEG?w=900&h=500',
  },
  {
    url: 'https://img2.baidu.com/it/u=556945581,516881872&fm=253&fmt=auto&app=138&f=PNG?w=889&h=500'
  }
]
// 表单数据
let tableData = reactive([])
// 实际传递的条件
let listQuery = reactive({
  currentPage: 1,
  pageSize: 6
})
// 获取列表
const getPageList = async () => {
  const res = await fetchGetSocietyList(listQuery)
  res.data.data.forEach((item: { imgurl: any }) => {
    const imgItem = {
      url: item.imgurl
    }
    tableData.push(imgItem)
  })
}
onMounted(() => {
  getPageList()
})
</script>
<template>
  <div class="swiper">
    <el-carousel :interval="4000" height="51rem">
      <el-carousel-item v-for="(item, index) in tableData" :key="index">
        <img :src="item.url">
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<style lang="scss" scoped>
.swiper {
  padding: 2rem;
  background-color: #fff;
  box-sizing: border-box;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);

  img {
    width: 100%;
  }
}
</style>
